
<style lang="scss" scoped>
@import '~@/styles/fullschedule.scss';
.appo-item-box{
  height: 100%;
}
.appoItemBox{
  // padding: 0 8px;
  border: solid 1px #0bd677;
  background-color: #fff;
  border-radius: 3px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 2;
  line-height: 40px;
  height: 100%;
}
.time{
  color: #0bd677;
  background-color: rgba(11,214,119,0.08);
  text-align: center;
}
.appoPadding{
  margin: 10px 0;
}
.menu_container{
  background-color: #fff;
  padding: 10px 0;
  border-radius: 3px;
  position: fixed;
  z-index: 100000;
  list-style-type: none;
  font-size: 12px;
  color: #333;
  box-shadow: 0 3px 5px rgba(125,125,125, 0.5);
  li{
    padding: 5px 20px;
    cursor: pointer;
    &:hover{
      background-color: #f00;
      color: #fff;
    }
  }
}
/deep/ .el-input__inner{
  text-align: center !important;
  padding: 0 10px !important;
}
</style>

<!--号源组-->
<template>
  <div
    class="appo-item-box flex flex-row align-center"
    :class="{
      appoPadding: appoRepair
    }"
  >
    <div
      class="appoItemBox flex-1"
      :class="[
        checked ? 'appo-active':''
      ]"
    >
      <div class="flex justify-center align-center">
        <div class="time" v-if="sItem.timeInterval">
          <span>{{sItem.timeInterval}}</span>
        </div>
        <div class="time" v-else-if="sItem.numberType == '按班次'">
          <span>{{sItem.checkClass}}</span>
        </div>
        <div class="time" v-else-if="sItem.numberType">
          <span>{{sItem.numberType}}</span>
        </div>
        <div class="mar-l-6">
          <div class="align-center">
            <!-- {{sItem.num}} -->
            <span>{{sItem.numType}}</span>
            <!-- @keyup.native="updateItem('num', sItem)" -->
            <el-input v-model.number="sItem.num" style="width: 60px; text-align: center !important;" size="mini" type="number" @input="updateItem('num', sItem)"></el-input>
            <!-- @keyup.native="updateItem('num', sItem)" -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/api/bus'
export default {
  name: 'FsItem',
  // checkedAllShow && isEdit && checkboxShow
  props: {
    checkboxShow: Boolean,
    allCkb: {
      type: Boolean,
      default: false
    },
    itemSize: {
      type: String,
      default: 'mini'
    },
    sItem: {
      type: Object,
      default: () => {}
    },
    appoDisable: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    // 是否可编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否单格排序
    appoRepair: {
      type: Boolean,
      default: false
    },
    // 模版状态
    statusTemplate: {
      type: String,
      default: 'schedule'
    },
    // 选中id
    actionCheckIds: {
      type: Array,
      default: () => []
    },
    // 班次索引，0-1-2三个班次
    sidebarIndex: {
      type: Number,
      default: -1
    },
    // 星期索引，星期几0-1-2-3-4-5-6
    scheduleIndex: {
      type: Number,
      default: -1
    },
    // 号源索引，当前班次中的第几个
    appoIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      appoFilterShow: false, // 是否显示锁定按钮
      menuconfig: {
        left: 0,
        top: 0,
        visible: false
      }
    }
  },
  // watch: {
  //   'sItem.isChecked': {
  //     handler(newVal, oldVal) {
  //       // console.log('sItem.isChecked changed')
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  created() {
    // // console.log('#######itemSize3333333333333333created', this.itemSize)
  },
  mounted() {
    // // console.log('星期几', this.scheduleIndex)
    // // console.log('班次索引', this.sidebarIndex)
    // // console.log('号源索引', this.appoIndex)
    // // console.log('checkboxShow', this.checkboxShow)
    // // console.log('sItem', this.sItem)
    // // console.log('#######itemSize3333333333333333mounted', this.itemSize)
  },
  methods: {
    // 数据仅可输入数字判断
    updateItem(keyVal, item) {
      console.log('keyVal', item)
      bus.$emit('updateItem', item)
      // item[keyVal] = item[keyVal] ? item[keyVal].replace(/[^\d]/g, '') : item[keyVal]
      // this.calcInit()
    }
    // calcInit() {
    //   console.log('this.initNumObj', this.initNumObj)
    //   const isCn = getContinuityNum()
    //   let len = this.tableData.length;
    //   this.tableData.forEach((item, index) => {

    //   })
    // }
  }
}
</script>
